<template>
  <div class="container white_bgc">
    <div class="cls_lie recommended">
      <Headerchunk :headinfo="headinfo"></Headerchunk>
      <ul class="rec_cls_list">
        <li v-for="(list,index) in lists" :key="index">
          <router-link :to="{name:'index'}" class="con">
            <img :src="list.src" alt="">
            <p>{{list.name}}</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Headerchunk from '@/components/common/Headerchunk'

export default{
  data(){
    return {
      headinfo:{
        before:'查看更多',
        after:'推荐活动',
        imgurl:'static/img/icon_jigou.png'
      },
      lists:[
        {
          src:'static/img/tui_school.png',
          name:'推荐活动测试商品一'
        },
        {
          src:'static/img/tui_school.png',
          name:'推荐活动测试商品二'
        },
        {
          src:'static/img/tui_school.png',
          name:'推荐活动测试商品三'
        },
        {
          src:'static/img/tui_school.png',
          name:'推荐活动测试商品四'
        }
      ]
    }
  },
  components:{ Headerchunk }
}
</script>
<style lang="scss" scoped>
.rec_cls_list{
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  
  li{
    width:25%;
    height:25%;
    padding:0 5px;

    .con{
      display: block;
      overflow: hidden;
      
      position: relative;

      img{ 
        width: 100%;
        border:1px solid #eee;
      }
    }

    p{
      width:80%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin:5px auto 0;
    }
  }
}
</style>